<template>
	<div class="home1">
		<!-- <list-page-navigation>
			<div class="liebiao1" v-for="(vItem, index) in videos" :key="index" @click="playVideo(vItem)">
				<img class="bfImg" src="../assets/spbf.png" />
				<video :key="index" width="100%" height="100%" @loadeddata="onLoadedData(index)" :src="vItem.video + '#t=0.1'"
					preload="metadata" playsinline
					:poster="vItem.video + '?spm=qipa250&x-oss-process=video/snapshot,t_1000,f_jpg,w_100,h_100,m_fast'" />
				<div class="title">{{ vItem.title }}</div>
			</div>
			<div style="height: 2rem;width: 100%" />
		</list-page-navigation> -->
		<list-page-navigation>
			<div class="box">
				<div class="header_title">-- 视频展 --</div>
				<div class="imgList">
					<div class="imgItem" v-for="(vItem, index) in videos" :key="index" @click="playVideo(vItem)">
						<div class="liebiao1">
							<img class="bfImg" src="../assets/spbf.png" />
							<video :key="index" width="100%" height="100%" @loadeddata="onLoadedData(index)"
								:src="vItem.video + '#t=0.1'" preload="metadata" playsinline
								:poster="vItem.video + '?spm=qipa250&x-oss-process=video/snapshot,t_1000,f_jpg,w_100,h_100,m_fast'" />
						</div>
						<div style="display: flex;flex-direction: column;flex: 1;justify-content: space-between;">
							<div class="title_text">{{ vItem.title }}</div>
							<div class="date">{{ vItem.createTime }}</div>
						</div>

					</div>
				</div>
			</div>
			<div style="height: 2rem;width: 100%" />
		</list-page-navigation>
		<!-- 播放器 -->
		<video-play ref="refVideoPlay"></video-play>
	</div>
</template>
<script>
import ListPageNavigation from '@/components/ListPageNavigation.vue';
import VideoPlay from '@/components/VideoPlay.vue';
import { baseUrlImg, clickCount } from '@/api/index.js'

export default {
	name: 'VideoList',
	components: {
		ListPageNavigation,
		VideoPlay,
	},
	data() {
		return {
			videos: []
		}
	},
	mounted() {
		if (this.$route.params) {
			this.dataInfo = this.$route.params
			console.info(this.dataInfo)
			const tempList = []
			this.dataInfo.videoContent?.map((p) => {
				let obj = {
					id: this.dataInfo.id,
					video: baseUrlImg + p,
					cover: this.dataInfo.cover,
					title: this.dataInfo.coverTitle,
				}
				if (this.dataInfo.createTime) {
					obj.createTime = this.dataInfo.createTime.split(' ')[0]
				}
				tempList.push(obj)
			})
			this.videos = tempList
		}
	},
	methods: {
		playVideo(item) {
			this.clickCountFunc(item.id)
			this.$refs.refVideoPlay.open(item.video);
		},
		//点击统计
		clickCountFunc(typeld, typesubld) {
			let params = {
				type: 4,
				typeld
			}
			if (typesubld) {
				params['typesubld'] = typesubld
			}
			clickCount(params).then(res => {
			})
		},
		onLoadedData(index) {
			console.info(index)
			const tempList = JSON.parse(JSON.stringify(this.videos))
			tempList[index].loaded = true
			this.videos = tempList
		}
	},
}
</script>
<style scoped>
.home1 {
	width: 100vw;
	height: 100vh;
	background: url(../assets/index_bj.png);
	background-repeat: no-repeat;
	background-position: center center;
	background-attachment: fixed;
	background-size: 100% 100%;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	max-width: 640px;
	margin: 0 auto;
	padding: 0.5rem 0.4rem 0 0.4rem;
}

.liebiao1 {
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	position: relative;
	align-items: center;
	justify-content: center;
	width: 50%;
}

.liebiao1 .title {
	font-size: 0.48rem;
	color: white;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	margin-top: 0.2rem;
	width: 100%;
}

.coverImg {
	width: 100%;
	object-fit: contain;
}

.bfImg {
	width: 0.8rem !important;
	height: 0.8rem !important;
	position: absolute;
}

.imgList {
	display: flex;
	flex-direction: column;
	padding-bottom: 2rem;
}

.imgItem {
	width: 100%;
	display: flex;
	flex-direction: row;
	/* align-items: center; */
	margin-top: 0.4rem;
	box-sizing: border-box;
	padding-bottom: 0.4rem;
	border-bottom: 1px dashed #e5e5e5;
}

.imgItem .title_text {
	font-size: 0.45rem;
	margin: 0 0.4rem;
	color: white;
}

.imgItem .date {
	font-size: 0.4rem;
	margin-top: 10px;
	color: #333;
	display: flex;
	justify-content: end;
}

.header_title {
	font-size: 0.7rem;
	color: red;
	width: 100%;
	text-align: center;
	margin-bottom: 0.2rem;
	font-weight: bold;
}

@media only screen and (min-width:640px) {
	.liebiao1 {
		padding: 0 0.2rem 0.2rem 0.2rem;
	}

	.bfImg {
		width: 0.5rem;
		height: 0.5rem;
		position: absolute;
	}

	.imgItem .title_text {
		font-size: 0.3rem;
		margin: 0 0.3rem;
		color: white;
	}

	.header_title {
		font-size: 0.5rem;
	}
}
</style>